<template>
<div id="success-case">
  <navigation></navigation>
  <div class="banner">
    <p>SUCCESS CASE</p>
    <p>成功案例</p>
    <div class="item"></div>
  </div>
  <div class="tab">
    <p @click="chooseTab(1)" :class="[tabIndex == 1 ? 'active': '']">本科</p>
    <p @click="chooseTab(2)" :class="[tabIndex == 2 ? 'active': '']">研究生</p>
  </div>
  <div v-if="tabIndex == 1" class="case">
    <div v-for="item of bInfo" class="item" @click="toCaseDetail(item.id)">
      <img :src="item.picture" />
      <p class="name">{{item.name}}同学</p>
      <p>
        <span>国内学校：</span>
        <span>{{item.c_school}}</span>
      </p>
      <p>
        <span>学术成绩：</span>
        <span>{{item.academic}}</span>
      </p>
      <p>
        <span>标化成绩：</span>
        <span>{{item.standard}}</span>
      </p>
      <p>
        <span>录取院校：</span>
        <span>{{item.enroll_school}}</span>
      </p>
      <p>
        <span>录取专业：</span>
        <span>{{item.major}}</span>
      </p>
    </div>
  </div>
  <div v-else class="case">
    <div v-for="item of yInfo" class="item" @click="toCaseDetail(item.id)">
      <img :src="item.picture" />
      <p class="name">{{item.name}}同学</p>
      <p>
        <span>国内学校：</span>
        <span>{{item.c_school}}</span>
      </p>
      <p>
        <span>学术成绩：</span>
        <span>{{item.academic}}</span>
      </p>
      <p>
        <span>标化成绩：</span>
        <span>{{item.standard}}</span>
      </p>
      <p>
        <span>录取院校：</span>
        <span>{{item.enroll_school}}</span>
      </p>
      <p>
        <span>录取专业：</span>
        <span>{{item.major}}</span>
      </p>
    </div>
  </div>
  <div class="application-data">
    <p>TOP名校历年申请数据库</p>
    <p>APPLICATION DATABASE OF TOP FAMOUS<br> SCHOOL OVER THE YEARS</p>
    <div class="item"></div>
    <table class="data-table">
      <tr class="title">
        <td style="width: 2.35rem;">学校</td>
        <td style="width: 0.76rem;">2017</td>
        <td style="width: 1.72rem;">常年</td>
        <td style="width: 1.87rem;">保录取率</td>
      </tr>
      <tr>
        <td>Columbia<br>University</td>
        <td>48</td>
        <td>5.8%</td>
        <td>96.5%</td>
      </tr>
      <tr>
        <td>University of<br>Pennsylvania</td>
        <td>26</td>
        <td>5.5%</td>
        <td>97.6%</td>
      </tr>
      <tr>
        <td>University of<br>Chicago</td>
        <td>13</td>
        <td>6.3%</td>
        <td>100%</td>
      </tr>
      <tr>
        <td>University of<br>Southern Calif</td>
        <td>18</td>
        <td>5.2%</td>
        <td>100%</td>
      </tr>
      <tr>
        <td>JOHNS HOPKINS<br>University</td>
        <td>62</td>
        <td>5.5%</td>
        <td>97.6%</td>
      </tr>
      <tr>
        <td>Cornell<br>University</td>
        <td>18</td>
        <td>7.6%</td>
        <td>100%</td>
      </tr>
      <tr>
        <td>New York<br>University</td>
        <td>76</td>
        <td>6.5%</td>
        <td>100%</td>
      </tr>
      <tr>
        <td>Boston<br>University</td>
        <td>68</td>
        <td>7.5%</td>
        <td>100%</td>
      </tr>
      <tr>
        <td>Northeastern<br>University</td>
        <td>55</td>
        <td>7.3%</td>
        <td>100%</td>
      </tr>
    </table>
  </div>
  <pageFooter></pageFooter>
</div>
</template>
<script>
import navigation from "@/components/navigation/index";
import pageFooter from "@/components/footer/index";

import {
  NetworkUtil
} from "@/lib/util"

export default {
  components: {
    navigation,
    pageFooter
  },
  data() {
    return {
      tabIndex: this.$route.params.tabIndex ? this.$route.params.tabIndex : 1,
      bInfo: {},
      yInfo: {}
    }
  },
  created() {
    NetworkUtil.request({
      url: '/api/success_case',
      method: 'get'
    }, info => {
      this.bInfo = info.cases_b
      this.yInfo = info.cases_y
      // for (let item of this.bInfo) {
      //   item.picture = 'https://www.keywinus.com/' + item.picture
      // }
      // for (let item of this.yInfo) {
      //   item.picture = 'https://www.keywinus.com/' + item.picture
      // }
    }, err => {
      console.log(err)
    })
  },
  methods: {
    chooseTab(tabIndex) {
      this.tabIndex = tabIndex
    },
    toCaseDetail(id) {
      this.$router.push({
        name: 'studentDetail',
        params: {
          id: id
        }
      })
    }
  }
}
</script>
<style lang="less" rel="stylesheet/less">
@import "index.less";
</style>
